<template>
	<view class="page">
		<!-- 个人信息列表 -->
		<view class="main padding-0">
			<view class="bg-white radius padding">
				<view class="menu-item" @click="goToAvatar">
					<u-text size="32rpx" color="#333333" text="头像"></u-text>
					<view>
						<u-avatar :src="userInfo.avatar" size="80rpx" shape="circle">
						</u-avatar>
					</view>
					<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
				</view>

				<view class="menu-item" @click="goToNickname">
					<u-text size="32rpx" color="#333333" text="姓名"></u-text>
					<u-text align="right" size="32rpx" color="#666" :text="userInfo.nickname"></u-text>
					<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
				</view>

				<view class="menu-item" @click="goToSex">
					<u-text size="32rpx" color="#333333" text="性别"></u-text>
					<u-text align="right" size="32rpx" color="#666" :text="userInfo.gender"></u-text>
					<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
				</view>

				<view class="menu-item" @click="goToRole" v-if="role === 'parent' || role === 'principal'">
					<u-text size="32rpx" color="#333333" text="我的角色"></u-text>
					<u-text align="right" size="32rpx" color="#666" :text="userInfo.role"></u-text>
					<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
				</view>

				<view class="menu-item" @click="goToPhone">
					<u-text size="32rpx" color="#333333" text="登陆手机号"></u-text>
					<u-text align="right" size="32rpx" color="#666" :text="userInfo.phone"></u-text>
					<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
				</view>


				<template v-if="role === 'teacher'">
					<view class="menu-item" @click="goToEmergencyContact">
						<u-text size="32rpx" color="#333333" text="紧急联系人"></u-text>
						<u-text align="right" size="32rpx" color="#666" :text="userInfo.emergencyContactPhone"></u-text>
						<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
					</view>
					<view class="menu-item" @click="goToBirthday">
						<u-text size="32rpx" color="#333333" text="出生日期"></u-text>
						<u-text align="right" size="32rpx" color="#666" :text="userInfo.birthday"></u-text>
						<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
					</view>
					<view class="menu-item" @click="goToEntryDate">
						<u-text size="32rpx" color="#333333" text="入职日期"></u-text>
						<u-text align="right" size="32rpx" color="#666" :text="userInfo.entryDate"></u-text>
						<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
					</view>
					<view class="menu-item" @click="goToGraduationDate">
						<u-text size="32rpx" color="#333333" text="毕业院校/专业/教师资格证"></u-text>
						<!-- <u-text align="right" size="32rpx" color="#666" :text="userInfo.role"></u-text> -->
						<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
					</view>
					<view class="menu-item" @click="goToJobType">
						<u-text size="32rpx" color="#333333" text="岗位类型"></u-text>
						<!-- <u-text align="right" size="32rpx" color="#666" :text="userInfo.role"></u-text> -->
						<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
					</view>
					<view class="menu-item" @click="goToJobDetail">
						<u-text size="32rpx" color="#333333" text="职务详情"></u-text>
						<!-- <u-text align="right" size="32rpx" color="#666" :text="userInfo.role"></u-text> -->
						<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const role = ref('')
// 用户信息
const userInfo = ref({
	avatar: '/static/image/img-math-bg.png',
	nickname: 'Zora',
	gender: '男',
	role: role.value === 'parent' ? '张三的爸爸' : '校长',
	phone: '13911112222',
	birthday: '2025-01-01',
	emergencyContact: '张三',
	emergencyContactPhone: '13911112222',
})

// 修改手机号
const changePhone = () => {
	uni.showModal({
		title: '提示',
		content: '如需修改手机号，请联系客服',
		showCancel: false
	})
}

// 头像
const goToAvatar = () => {
	uni.navigateTo({
		url: '/pages/common/mine/avatar'
	})
}

// 昵称
const goToNickname = () => {
	uni.navigateTo({
		url: '/pages/common/mine/nickname'
	})
}

// 性别
const goToSex = () => {
	uni.navigateTo({
		url: '/pages/common/mine/sex'
	})
}

// 我的角色
const goToRole = () => {
	uni.navigateTo({
		url: '/pages/common/mine/role'
	})
}

// 登录手机号
const goToPhone = () => {
	uni.navigateTo({
		url: '/pages/common/mine/phone'
	})
}

// 出生日期
const goToBirthday = () => {
	uni.navigateTo({
		url: '/pages/common/mine/birthday'
	})
}

// 入职日期
const goToEntryDate = () => {
	uni.navigateTo({
		url: '/pages/common/mine/entryDate'
	})
}

// 毕业院校/专业/教师资格证
const goToGraduationDate = () => {
	uni.navigateTo({
		url: '/pages/common/mine/graduation'
	})
}

// 岗位类型
const goToJobType = () => {
	uni.navigateTo({
		url: '/pages/common/mine/jobType'
	})
}

// 紧急联系人
const goToEmergencyContact = () => {
	console.log('goToEmergencyContact')
	uni.navigateTo({
		url: '/pages/common/mine/emergencyContact'
	})
}

// 职务详情
const goToJobDetail = () => {
	uni.navigateTo({
		url: '/pages/common/mine/jobDetail'
	})
}

onLoad(() => {
	role.value = uni.getStorageSync('role');
	console.log('role', role.value)
})
</script>

<style scoped lang="scss">
.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;

	&:last-child {
		border-bottom: none;
	}
}
</style>
